/*
 * @Author: shawnxiao
 * @Date: 2021-12-08 12:08:48
 * @LastEditTime: 2021-12-23 16:16:12
 * @FilePath: /vite2-vue3-typescript/src/views/Tsx/index.tsx
 */

import { defineComponent, ref } from 'vue'
import Child from './components/Child'

export default defineComponent({
  components: {
    Child,
  },
  setup() {
    const count = ref(0)
    const handleAdd = () => {
      count.value++
    }
    return () => (
      <div style={{ color: '#333' }}>
        <h1>this is parent</h1>
        {`Hello,tsx, ${count.value}`}
        <button onClick={handleAdd}>Add count</button>
        <p>parent count is:{count.value}</p>
        <Child style={{ color: '#333' }} count={count.value} onChildClick={handleAdd}>
          {{
            header: () => <h3>slot header</h3>,
            default: () => <h3>default header</h3>,
          }}
        </Child>
      </div>
    )
  },
})
